$h:200px;
// sass定义函数
/*
sass定义函数
*/

// 单行备注不会被解析到css文件 多行备注会被解析到css中
// 混合 mixin
@mixin center($w:300px) {
    position: absolute;
    left: 0;
    top: 0;
    right: $w;
    bottom: 0;
    margin: auto;
}


@function test($n){
    // 逻辑。。。
    @return $n + 10
}


h1{
    color: red;
}
.wrap{
    width: $h;
    height: $h;
    background-color: red;
    .inner{
        width: 100 + 100px;
        height: test(100px);
        background-color: yellow;
    }
}
.box1{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
    .box2{
        width: 100px;
        height: 200px;
        background-color: yellowgreen;
       @include center(400px);

    }
}